<template>
	<div class="code-stream-form">
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="80px" size="small">
			<el-form-item label="分辨率" prop="size">
				<el-select v-model="dataForm.size" class="m-2" placeholder="请选择">
					<el-option v-for="(item, index) in sizeOptions" :key="index" :label="item" :value="item" />
				</el-select>
			</el-form-item>
			<el-form-item label="码率" prop="framerate">
				<el-select v-model="dataForm.framerate" class="m-2" placeholder="请选择">
					<el-option v-for="(item, index) in framerateOptions" :key="index" :label="item" :value="item" />
				</el-select>
			</el-form-item>
			<el-form-item label="帧率" prop="bitrate">
				<el-input-number v-model="dataForm.bitrate" :step="1" :min="0" :max="999999" placeholder="请输入"></el-input-number>
			</el-form-item>
			<el-form-item label=""></el-form-item>
			<el-form-item label="" label-width="0">
				<div style="margin: auto; text-align: center">
					<el-button type="primary" @click="saveHandle">保存</el-button>
					<!-- <el-button  @click="resetHandle">重置</el-button> -->
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { assign, keys, pick } from 'lodash'
import { reactive, ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus/es'
import { useGetVideoCfgApi, useSaveVideoCfgApi } from '@/api/settingModule'

const props = defineProps({
	options: {
		type: Object,
		default() {}
	}
})

const dataFormRef = ref()
const dataForm = reactive({
	channelId: '', // 设备id
	channelNum: '', // 通道号 0=白光， 1=热成像
	size: '', // 分辨率
	framerate: '', // 帧率 根据设备能力集范围设置
	bitrate: 0 // 码率或码率上限
})
const dataRules = ref({
	size: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	framerate: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	bitrate: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
})

const sizeOptions = ref<any[]>([])
const framerateOptions = ref<any[]>([])

const getDetail = async () => {
	const { data } = await useGetVideoCfgApi({ channelId: props.options.channelId, channelNum: props.options.channelNum })

	sizeOptions.value = data.sizelist
	framerateOptions.value = data.frameraterange

	assign(dataForm, pick(data, keys(dataForm)))
}

watch(
	() => props.options.channelNum,
	next => {
		getDetail()
	},
	{
		deep: true
	}
)

onMounted(() => {
	getDetail()
})

// 保存
const saveHandle = () => {
	dataForm.channelId = props.options.channelId
	dataForm.channelNum = props.options.channelNum

	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		useSaveVideoCfgApi(dataForm).then(() => {
			ElMessage.success({
				message: '保存成功',
				duration: 1000,
				onClose: () => {}
			})
		})
	})
}

const resetHandle = () => {
	dataFormRef.value?.resetFields()
}
</script>

<style lang="scss" scoped></style>
